<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>科研实验室后台管理系统</title>
    <meta name="keywords" content="科研实验室">
    <meta name="description" content="科研实验室管理系统">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
    <style>
    body {background:#fff;}
    /**自定义滚动条样式 */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }
    ::-webkit-scrollbar-track {
        background-color: transparent;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #9c9da0;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius: 2em
    }
    .layui-laydate-content>.layui-laydate-list {
        padding-bottom: 0px;
        overflow: hidden;
    }
    .layui-laydate-content>.layui-laydate-list>li{
        width:50%
    }
    </style>    
</head>
<body>

<!-- 会议室预约 -->
<div style="padding:20px 20px 20px 0;">
    <form class="layui-form" lay-filter="reservation">
        <div style="overflow-y:auto;height:450px;">
            <div class="layui-form-item">
                <label class="layui-form-label">会议室</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="room" readonly="">
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">会议名称</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input lay-date" id="meeting-laydate-start" name="start" readonly="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input lay-date" id="meeting-laydate-end" name="end" readonly="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="" class="layui-textarea" placeholder="简单描述会议"></textarea>
                </div>
            </div>
        </div>
        <div style="text-align: right;">
            <button class="layui-btn" lay-submit lay-filter="editorSubmit">提交</button><button type="button" class="layui-btn layui-btn-primary" lay-active="cancel">取消</button>
        </div>
    </form>
</div>    


<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script>

layui.use(['jquery','util','form','laydate'],function(){
    var $       = layui.jquery,
        util    = layui.util,
        form    = layui.form,
        laydate = layui.laydate;
        index = parent.layer.getFrameIndex(window.name); //获取窗口索引

    parent.layer.iframeAuto(index)

    util.event('lay-active',{
        // 关闭弹层
        cancel:function() {
            parent.layer.close(index);
        }
    });

    //开始日期
    var insStart = laydate.render({
        elem: '#meeting-laydate-start'
        //,min: 0
        ,type: 'time'
        ,trigger:'click'
        ,format:'H:mm'
        ,btns: ['confirm']
        ,done: function(value, date){
            //更新结束日期的最小日期
            // insEnd.config.min = lay.extend({}, date, {
            //     month: date.month - 1
            // });
            // insEnd.config.elem[0].click();
        },
        ready: function (date) {
            formatminutes();
        }        
    });

    //结束日期
    var insEnd = laydate.render({
        elem: '#meeting-laydate-end'
        //,min: 0
        ,type: 'time'
        ,trigger:'click'
        ,format:'H:mm'
        ,btns: ['confirm']
        ,done: function(value, date){
            //更新开始日期的最大日期
            // insStart.config.max = lay.extend({}, date, {
            //     month: date.month - 1
            // });
        },
        ready: function (date) {
            formatminutes();
        }
    });

    // laydate特殊化处理
    function formatminutes(){
        var dateortime = $(".layui-laydate").find(".layui-laydate-footer").find("span").text().substr(0, 4);
        if (dateortime == "确定") {
            var aa = $(".laydate-time-list li ol")[1];
            var showtime = $($(".laydate-time-list li ol")[1]).find("li");
            for (var i = 0; i < showtime.length; i++) {
                var t00 = showtime[i].innerText;
                if (t00 != "00" && t00 != "30") {
                    showtime[i].remove()
                }
            }
            $($(".laydate-time-list li ol")[2]).find("li").remove();  //清空秒
        }        
    }

    // 提交
    var submitFlag = true;
    form.on('submit(editorSubmit)',function(data) {
        console.log(data.field)
        var _this = $(data.elem);

        if(submitFlag) {
            submitFlag = false;
            btnLoading.add(_this);

            console.log('点击了保存')
            
            // 演示内容，模拟提交后的事件。
            setTimeout(function() {
                btnLoading.remove(_this);
                layer.msg('提交成功');
                submitFlag = true;
            },2000);  
            // 成功之后关闭弹层自己   parent.layer.close(index);      
        }
        return false;
    });


});

// 接收来自父层的值
window.getMeetingVal = function(val){
    console.log(val)
    layui.use(['form'],function(){
        var form = layui.form;
        form.val('reservation',{
            room:val.room,
            start:val.start,
            end:val.end,
        })
    })
}

</script>
</body>
</html>